<template>
  <div class="home" style="overflow: auto">
    <div class="breads">
      <hawk-breadcrumb></hawk-breadcrumb>
    </div>
    <div class="wrap">
      <el-row>
        <el-col :span="17">
          <el-row style="border-bottom: 1px solid #eee">
            <el-col :span="12" class="assets">
              <p class="title">资产统计</p>
              <p class="num">总资产数量 52496<i class="el-icon-top"></i>24%</p>
              <el-row class="content">
                <el-col :span="8" class="item">
                  <el-progress type="circle" :percentage="25.5" color="#7EBD50">
                  </el-progress>
                </el-col>
                <el-col :span="8" class="item">
                  <el-progress type="circle" :percentage="25.5" color="#E04F4F">
                  </el-progress>
                </el-col>
                <el-col :span="8" class="item">
                  <el-progress type="circle" :percentage="25.5" color="#00A1D8">
                  </el-progress>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="12" class="alarm">
              <p class="title">告警分类统计<i class="el-icon-warning"></i></p>
              <div class="main">
                <div id="pieChart"></div>
                <ul>
                  <li v-for="(item,index) in pieChartData.list" :key="index">
                    <p>
                      <i
                         :class="{type1: item.type === 1,type2: item.type === 2,type3: item.type === 3,type4: item.type === 4,type5: item.type === 5}"></i>{{item.name}}<span>{{item.value}}</span>次
                    </p>
                  </li>
                </ul>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="14" class="lineChart">
              <p class="title">风险指数趋势图<i class="el-icon-warning"></i></p>
              <div class="info">
                <div class="name">
                  <h4>指标</h4>
                  <p>Сommercial networks and enterprises</p>
                </div>
                <dl>
                  <dt>
                    <h4>80分</h4>
                    <p><i></i>风险指数</p>
                  </dt>
                  <dd><i class="el-icon-bottom"></i><span>22</span></dd>
                </dl>
              </div>
              <div id="lineChart"></div>
            </el-col>
            <el-col :span="10" class="columnChart">
              <p class="title">风险指数趋势图<i class="el-icon-warning"></i></p>
              <div class="info">
                <div class="name">
                  <h4>指标</h4>
                  <p>74,382.72</p>
                </div>
                <el-dropdown trigger="click" class="select">
                  <span class="el-dropdown-link">
                    {{ dateChecked}}<i
                       class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item v-for="(item, index) in dateList"
                                      :key="index"
                                      @click.native="changeDate(index)">
                      {{ item.label }}</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
              <div id="columnChart"></div>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="7" class="alarmData">
          <p class="title">告警分类统计</p>
          <div class="timeline">
            <div class="line"></div>
            <ul>
              <li>
                <div class="icon">
                  <i class="el-icon-picture-outline-round"></i>
                </div>
                <p>1小时告警数</p>
                <p><b>5</b></p>
              </li>
              <li>
                <div class="icon">
                  <i class="el-icon-picture-outline-round"></i>
                </div>
                <p>6小时告警数</p>
                <p><b>35</b></p>
              </li>
              <li>
                <div class="icon">
                  <i class="el-icon-picture-outline-round"></i>
                </div>
                <p>24小时告警数</p>
                <p><b>120</b></p>
              </li>
            </ul>
          </div>
          <div class="dateContent">
            <div class="item" v-for="(item, index) in alarmDateList"
                 :key="index">
              <div class="info">
                <div class="icon" :class="{
                    blue: item.type === 1,
                    orange: item.type === 2,
                    green: item.type === 3,
                  }">
                  <i class="el-icon-bell"></i>
                </div>
                <p class="name">{{ item.name }}</p>
                <p class="time">{{ item.time }}</p>
              </div>
              <p class="text">{{ item.msg }}</p>
              <div class="isNew" v-if="item.isNew">NEW</div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import HawkBreadcrumb from '../../components/breadcrumb/Breadcrumb'

import {
  getList,
} from '@/api/assets/dictionaries/area'


export default {
  components: { HawkBreadcrumb },
  data () {
    return {
      pieChartData: {
        total: '141',
        list: [
          {
            type: 1,
            name: '分类1',
            value: '12'
          },
          {
            type: 3,
            name: '分类2',
            value: '20'
          },
          {
            type: 2,
            name: '分类3',
            value: '70'
          },
          {
            type: 4,
            name: '分类4',
            value: '6'
          },
          {
            type: 1,
            name: '分类5',
            value: '33'
          },
        ]
      },
      lineChartXdata: [
        "7/12",
        "8/12",
        "9/12",
        "10/12",
        "11/12",
        "12/12",
        "13/12",
        "14/12",
        "15/12",
        "16/12",
        "17/12",
      ],
      lineChartYdata: [150, 230, 224, 218, 135, 147, 260, 300, 266, 177, 312],
      dateList: [
        {
          value: 3,
          label: "最近三天",
        },
        {
          value: 5,
          label: "最近五天",
        },
        {
          value: 7,
          label: "最近七天",
        },
      ],
      dateChecked: "最近七天",
      columnChartInitial: {
        x: ["100", "200", "100", "200", "100", "200", "200",],
        y: ["9.28", "9.27", "9.26", "9.25", "9.24", "9.23", "9.22"]

      },
      columnChartList: {},
      alarmDateList: [
        {
          type: 1,
          name: "Oracle test 监控",
          time: "09-25 15:12",
          msg: "192.168.0.20主机CPU使用率超过9%且到目前为止已累计触发告警4次",
          isNew: true,
        },
        {
          type: 2,
          name: "Oracle test 监控",
          time: "09-25 15:12",
          msg: "192.168.0.20主机CPU使用率超过9%且到目前为止已累计触发告警4次",
          isNew: false,
        },
        {
          type: 3,
          name: "Oracle test 监控",
          time: "09-25 15:12",
          msg: "192.168.0.20主机CPU使用率超过9%且到目前为止已累计触发告警4次",
          isNew: true,
        },
        {
          type: 3,
          name: "Oracle test 监控",
          time: "09-25 15:12",
          msg: "192.168.0.20主机CPU使用率超过9%且到目前为止已累计触发告警4次",
          isNew: true,
        },
      ],
    };
  },
  methods: {
    picChart () {
      // 基于准备好的dom，初始化echarts实例
      var pieChart = document.getElementById("pieChart");
      var myChart = echarts.init(pieChart);
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '告警数',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            labelLine: {
              show: false
            },
            data: this.pieChartData.list
          }
        ]
      });
    },
    lineChart () {
      // 基于准备好的dom，初始化echarts实例
      var lineChart = document.getElementById("lineChart");
      var myChart = echarts.init(lineChart);
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: "category",
          data: this.lineChartXdata,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: this.lineChartYdata,
            type: "line",
          },
        ],
      });
    },
    changeDate (index) {
      var obj = JSON.parse(sessionStorage.getItem("columnChartInitial"));
      this.dateChecked = this.dateList[index].label;
      let listX = [];
      let listY = [];
      for (let i = 0; i < this.dateList[index].value; i++) {
        listX.push(obj.x[i]);
        listY.push(obj.y[i]);
      }
      this.columnChartList.x = listX;
      this.columnChartList.y = listY;
      this.columnChart();
    },
    columnChart () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("columnChart"));
      // 绘制图表
      myChart.setOption({
        tooltip: {},
        xAxis: {
        },
        yAxis: {
          type: "category", //增加这一行代码，即可柱状图横置
          data: this.columnChartList.y,
        },
        series: [
          {
            name: "指标",
            type: "bar",
            data: this.columnChartList.x,
          },
        ],
      });
    },
  },
  async mounted () {
     const ret = await getList({
        query: {
          name: '',
        },
        page: {
          current: 1,
          size: 10,
        },
      })
    

    this.picChart();
    this.columnChartList = this.columnChartInitial;
    sessionStorage.setItem(
      "columnChartInitial",
      JSON.stringify(this.columnChartInitial)
    );
    this.lineChart();
    this.columnChart();
  },
};
</script>
<style lang='scss' scoped>
* {
  box-sizing: border-box;
}
.nav {
  padding: 20px 0 20px 14px;
  border-bottom: 1px solid #eee;
}
.breads {
  padding: 5px;
}
.wrap {
  min-width: 1150px;
}
.assets {
  padding-top: 20px;
  .title {
    font-size: 16px;
    color: #505d6f;
    padding-left: 30px;
  }
  .num {
    text-align: right;
    padding-right: 30px;
    i {
      color: #7ebd50;
      padding: 0 5px;
    }
  }
  .item {
    padding: 20px 0;
    text-align: center;
  }
}
.alarm {
  padding: 20px 0;
  border-left: 1px solid #eee;
  .title {
    font-size: 16px;
    color: #505d6f;
    padding-left: 30px;
    i {
      color: #a9a9b7;
      padding-left: 5px;
      font-size: 20px;
    }
  }
  .main {
    padding: 20px 20px 0;
    display: flex;
    ul {
      flex: 1;
      list-style: none;
      padding-top: 25px;
      li {
        float: left;
        width: 50%;
        padding: 10px 0;
        p {
          font-size: 12px;
          color: #505d6f;
          i {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin-right: 5px;
          }
          .type1 {
            background: #20a3ff;
          }
          .type2 {
            background: #7ebd50;
          }
          .type3 {
            background: #25bd82;
          }
          .type4 {
            background: #eeab25;
          }
          .type5 {
            background: #7479d7;
          }
          span {
            padding-left: 15px;
            padding-right: 3px;
            font-size: 16px;
          }
        }
      }
    }
  }
}
#pieChart {
  width: 170px;
  height: 170px;
}
.lineChart {
  border-right: 1px solid #eee;
  padding-top: 20px;
  .title {
    font-size: 16px;
    color: #505d6f;
    padding-left: 20px;
    i {
      color: #a9a9b7;
      padding-left: 5px;
      font-size: 20px;
    }
  }
  .info {
    width: 100%;
    padding: 20px 30px 0;
    display: flex;
    .name {
      flex: 1;
      font-size: 14px;
      h4 {
        color: #505d6f;
        line-height: 30px;
      }
      p {
        color: #99a1a9;
        line-height: 24px;
      }
    }
    dl {
      width: 120px;
      dt {
        float: left;
        width: 75px;
        h4 {
          font-size: 20px;
          color: #505d6f;
          line-height: 30px;
        }
        p {
          font-size: 12px;
          color: #505d6f;
          line-height: 18px;
          margin-top: 5px;
          i {
            display: inline-block;
            width: 10px;
            height: 10px;
            background: #828e9d;
            border-radius: 50%;
            margin-right: 5px;
          }
        }
      }
      dd {
        float: left;
        width: 45px;
        padding-top: 20px;
        i {
          color: #7ebd50;
          font-size: 20px;
        }
        span {
          font-size: 20px;
          color: #505d6f;
        }
      }
    }
  }
}
.columnChart {
  padding-top: 20px;
  .title {
    font-size: 16px;
    color: #505d6f;
    padding-left: 30px;
    i {
      color: #a9a9b7;
      padding-left: 5px;
      font-size: 20px;
    }
  }
  .info {
    width: 100%;
    padding: 20px 30px 0;
    display: flex;
    .name {
      flex: 1;
      font-size: 14px;
      h4 {
        color: #505d6f;
        line-height: 30px;
      }
      p {
        color: #99a1a9;
        line-height: 24px;
      }
    }
    .select {
      cursor: pointer;
      height: 25px;
    }
  }
}
#lineChart {
  width: 90%;
  height: 400px;
  margin: 0 auto;
}
#columnChart {
  width: 90%;
  height: 400px;
  margin: 0 auto;
}
.alarmData {
  border-left: 1px solid #ccc;
  padding: 10px 16px 0 5px;
  .title {
    font-size: 16px;
    color: #505d6f;
    line-height: 2.4;
  }
  .timeline {
    padding-top: 10px;
    padding-bottom: 20px;
    position: relative;
    .line {
      width: 100%;
      height: 2px;
      background: #7ebd50;
      position: absolute;
      left: 0;
      top: 34px;
    }
    ul {
      display: flex;
      list-style: none;
      position: relative;
      z-index: 2;
      li {
        flex: 1;
        .icon {
          width: 48px;
          height: 48px;
          margin: 0 auto;
          border-radius: 50%;
          background: #7ebd50;
          display: flex;
          align-items: center;
          i {
            font-size: 20px;
            color: #fff;
            display: block;
            margin: 0 auto;
          }
        }
        p {
          text-align: center;
          font-size: 16px;
          padding-top: 15px;
        }
      }
    }
  }
  .dateContent {
    padding-top: 10px;
    padding-bottom: 30px;
    .item {
      margin-bottom: 10px;
      padding: 20px 46px 20px 18px;
      border: 1px solid #eee;
      position: relative;
      overflow: hidden;
      .info {
        height: 32px;
        line-height: 32px;
        margin-bottom: 24px;
        color: #333;
        position: relative;
        .icon {
          float: left;
          width: 32px;
          height: 32px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          i {
            display: block;
            margin: 0 auto;
            font-size: 18px;
            color: #fff;
          }
        }
        .blue {
          background: #62d4ea;
        }
        .orange {
          background: #f38f4d;
        }
        .green {
          background: #3dd598;
        }
        .name {
          float: left;
          padding-left: 18px;
          font-size: 16px;
        }
        .time {
          float: right;
          font-size: 12px;
        }
      }
      .text {
        font-size: 14px;
        color: #666;
        text-align: justify;
      }
      .isNew {
        width: 70px;
        height: 14px;
        background: #f12727;
        text-align: center;
        font-size: 12px;
        color: #fff;
        position: absolute;
        right: -18px;
        top: 10px;
        transform: rotate(45deg);
      }
    }
  }
}
</style>